<!--
 描述: 右中
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">党员职业分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_cra"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "colorfulArea",
        data() {
            return {
                baseUrl: domain.testUrl,
                option: null,
                number: 0, // 播放所在下标
                timer: null,
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {

                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');

                    this.baseName = param;
                }
                var url = this.baseUrl + "memberDatav/findMemberByState?name="+ this.baseName;
                var data = [];
                var xdata = ['农牧渔业', '公务员', '务工经商', '退休人员', '事业单位', '其他单位'];



                axios.post(url).then((response) => {

                    for (let i = 0; i < response.data.length; i++) {
                        data.push(response.data[i].y)
                    }

                    let myChart = echarts.init(document.getElementById('chart_cra'));
                    this.option = {
                        tooltip: {
                            trigger: 'axis',
                            showContent: false,
                            axisPointer: {
                                type: 'shadow',
                                shadowStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#5d83ff'
                                    }, {
                                        offset: 0,
                                        color: 'rgba(255, 255, 255, 0)'
                                    }])
                                }
                            },
                        },
                        color: ['#5d83ff'],
                        grid: {
                            top: 30,
                            left: 17,
                            right: 24,
                            bottom: 20,
                            containLabel: true //轴上的数值
                        },
                        xAxis: {
                            type: 'category',
                            data: xdata,
                            boundaryGap: false,
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value}'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#999',
                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#999'
                                }
                            },
                        },
                        series: [{
                            name: '人数',
                            type: 'line',
                            data: data,
                            symbolSize: 10,
                            itemStyle: {
                                opacity: 0,
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    color: '#fff',
                                    fontSize: 20
                                },
                                itemStyle: {
                                    color: '#5d83ff',
                                    borderColor: '#fff',
                                    borderWidth: 2,
                                    opacity: 1
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#5d83ff'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 0, 0, 0)'
                                    }]),
                                }
                            },
                            smooth: true,
                        }]
                    };
                    myChart.setOption(this.option, true);

                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });



                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
        beforeDestroy() {
        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 1400px;
        top: 387px;
        width: 508px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }


</style>
